<template>
  <div id="sub-mv" class="content-box">
    <!-- 最新视频 -->
    <!-- 顶部标签筛选 -->
    <div class="new-mv">
      <div class="tag-screening">
        <div class="go-mv" @click="goAllMv('allmv')">
          <span class="font-16 pointer">最新MV</span>
          <a-icon type="right" class="pointer" />            
        </div>
        <checkable-tag
          :tagList="tagList"
          @checked="checked"
          :selectTag="tagName"
        />
      </div>
      <MvList
        v-for="item in newMvList"
        :key="item.id"
        :playcount="item.playCount"
        :cover="item.cover"
        :videoAuthor="item.artists"
        :videoTitle="item.name"
        @goDetail="event => goDetail(event, item.id)"
      ></MvList>
    </div>
    <!-- 网易出品 -->
    <div class="rcmd-mv">
      <div class="tag-screening">
        <div class="go-mv" @click="goAllMv('allmv', '网易出品')">
          <span class="font-16 pointer">网易出品</span>
          <a-icon type="right" class="pointer" />            
        </div>
      </div>
      <MvList
        v-for="item in rcmdMvList"
        :key="item.id"
        :playcount="item.playCount"
        :cover="item.cover"
        :videoAuthor="item.artists"
        :videoTitle="item.name"
        @goDetail="event => goDetail(event, item.id)"
      ></MvList>
    </div>
    <!-- MV排行榜 -->
    <TopList :topList="topList" :loading="loading">
      <template #header>
        <!-- 顶部标签筛选 -->
        <div class="tag-screening">
          <div class="go-mv" @click="goAllMv('alltop')">
            <span class="font-16 pointer">MV排行榜</span>
            <a-icon type="right" class="pointer" />            
          </div>
          <checkable-tag
            :tagList="tagList"
            @checked="checkedTop"
            :selectTag="topName"
          />
        </div>
      </template>
    </TopList>
  </div>
</template>

<script>
import CheckableTag from '@/components/Library/CheckableTag';
import TopList from '@/components/Content/TopList';
import MvList from '@/components/Content/MvList';
import { newMv, rcmdMv, topMv } from '@/api/music';

export default {
  name: 'subMv',

  components: {
    MvList,
    TopList,
    CheckableTag
  },

  data() {
    return {
      // 标签列表
      tagList: [
      {
        id: 7,
        name: "内地"
      },
      {
        id: 96,
        name: "港台"
      },
      {
        id: 8,
        name: "欧美"
      },
      {
        id: 16,
        name: "日本"
      },
      {
        id: 0,
        name: "韩国"
      }
    ],
      // 最新MV参数
      newParams: {
        area: '内地',
        limit: 8,
        timestamp: new Date().getTime()
      },
      // 网易出品MV参数
      rcmdParmas: {
        limit: 8,
        offset: 0,
        timestamp: new Date().getTime()
      },
      // MV排行榜参数
      topParams: {
        limit: 10,
        offset: 0,
        area: '内地',
        timestamp: new Date().getTime()
      },
      newMvList: [],
      rcmdMvList: [],
      topList: [],
      // MV标签值
      tagName: '内地',
      // 排行榜标签值
      topName: '内地',
      loading: false
    };
  },

  created() {
    this.getNewMv();
    this.getRcmdMv();
    this.getTopMv();
  },

  methods: {
    // 最新MV
    async getNewMv() {
      const res = (await newMv(this.newParams)).data;
      this.newMvList = Object.freeze(res.data);
    },
    // 网易出品
    async getRcmdMv() {
      const res = (await rcmdMv(this.rcmdParmas)).data;
      this.rcmdMvList = Object.freeze(res.data);
    },
    // MV排行榜
    async getTopMv() {
      this.loading = true;
      const res = (await topMv(this.topParams)).data;
      this.loading = false;
      this.topList = Object.freeze(res.data);
    },
    // 跳转
    goAllMv(name, type) {
      const go = {
        name,
        query: {}
      }
      if (type === '网易出品') {
        go.query.type = type
      } else {
        go.query.area = this.tagName;
      }
      this.$router.push(go);
    },
    // 跳转至详情页
    goDetail(event, id) {
      const { aid } = event.target.dataset;
      // 将选中标签信息存储到sessionStorage中,防止关闭窗口下次还是请求之前tag数据。不合理
      // sessionStorage.setItem('tagInfo', JSON.stringify(this.tagInfo));
      if (aid) {
        this.$router.push({
          name: 'artistdetail',
          query: {
            id: aid
          }
        })
      } else {
        console.log(id, 'mididmididmdimsdimdisdisidj')
        this.$router.push({
          name: 'videodetail',
          query: {
            mid: id
          }
        });
      }
    },
    checked(value) {
      this.tagName = value;
      this.newParams.area = value;
      this.getNewMv();
    },
    checkedTop(value) {
      this.topName = value;
      this.topParams.area = value;
      this.getTopMv();
    }
  },
};
</script>

<style lang="less" scoped>
.tag-screening {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .go-mv {
    color: #676767;
    font-weight: 700;
  }
}
.author > span {
  &::after {
    content: '/';
    display: inline-block;
  }
  &:last-child::after {
    display: none;
  }
}
</style>